<template>
  <el-card shadow="always" style="width: 95%;">
    <el-button type="primary" icon="el-icon-plus" plain size="medium" @click="addStudent">添加学生</el-button>

    <el-table
            :data="students"
            style="width: 100%">
      <el-table-column
              label="学号"
              prop="sid"
              align="center"
              width="180"/>

      <el-table-column
              label="姓名"
              prop="sname"
              align="center"/>

      <el-table-column
            label="性别"
            prop="sex"
            align="center"/>

      <el-table-column
              label="年龄"
              prop="age"
              align="center"/>

      <el-table-column
              label="住址"
              prop="addr"
              align="center"/>
      <el-table-column
              label="所在班级"
              prop="cid"
              align="center"/>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    添加或修改学生-->
    <el-dialog :title="student.sid ? '修改学生' : '添加学生'" :visible.sync="dialogFormVisible">
      {{student}}
      <el-form :model="student">
        <el-form-item label="学生姓名" :label-width="formLabelWidth">
          <el-input v-model="student.sname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生性别" :label-width="formLabelWidth">
          <el-radio v-model="student.sex" label="男">男</el-radio>
          <el-radio v-model="student.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="学生年龄" :label-width="formLabelWidth">
          <el-input v-model="student.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生住址" :label-width="formLabelWidth">
          <el-input v-model="student.addr" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在班级" :label-width="formLabelWidth">
          <el-select v-model="student.cid" placeholder="请选择班级">
            <el-option :label="c.cname" :value="c.cid" v-for="c in classes"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>

</template>

<script>
  export default {
    data() {
      return {
        students: [],
        student:{},   // 添加或修改的学生对象
        dialogFormVisible: false, //对话框默认会隐藏
        formLabelWidth:'100px',   //对话框前面的文本宽度
        classes:[],               //所有班级列表
      }
    },
    created() {
      this.findClasses()
      this.findAllStudents()
    },
    methods: {
      // 添加学生
      addStudent(){
        //1.0 清空表单数据
        this.student = {}
        //1.1 打开对话框
        this.dialogFormVisible = true
      },
      //查询所有班级
      findClasses(){
        this.$axios.get("/classes").then(({data}) => {
          this.classes = data.data
        })
      },
      //查询所有学生
      findAllStudents(){
        this.$axios.get("/student?cmd=list").then(({data}) => {
          this.students = data.data
        })
      },
      //保存学生
      save(){
        this.$axios.post(`/student?cmd=${this.student.sid ? 'update' : 'add'}`,this.student).then(({data}) => {
            if(data.code == 200){
              const _this = this
              this.$message({
                message: data.msg,
                type: 'success',
                onClose(){
                  _this.dialogFormVisible = false   // 关闭对话框
                  _this.findAllStudents()           // 重新查询页面
                }
              });
            }
        })
      },
      //编辑学生
      handleEdit(index, row) {
        //为表单绑定的模型数据赋值
        this.student = row
        //打开对话框
        this.dialogFormVisible = true
        console.log(index, row);
      },
      //删除学生
      handleDelete(index, row) {
        this.$confirm(`你真的要删除学生'${row.sname}'吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {   // 点击了“确定”按钮执行如下代码
          const  _this = this
          this.$axios.get("/student?cmd=delete&sid="+row.sid).then(({data}) => {
            if(data.code === 200){
              this.$message({
                type: 'success',
                message: data.msg,
                onClose(){        // 当消息框关闭时，刷新页面
                  _this.findAllStudents()
                }
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>
<style>
  .el-card{
    margin: 0 auto;
  }
</style>